<template>
  <e-table :columns="columns" :data="data" @on-filter-checkbox-enum-change="onFilterCheckboxEnumChange"></e-table>
</template>

<script setup>
import { ref } from 'vue';

const columns = [
  {
    title: '姓名',
    key: 'name',
    sortable: true
  },
  {
    title: '年龄',
    key: 'age',
  },
  {
    title: '工作部门',
    key: 'occupation',
    showFilterType: 'filterCheckboxEnum',
    filters: [
      { label: 'IaaS', value: 'IaaS' },
      { label: 'PaaS', value: 'PaaS' },
      { label: 'SaaS', value: 'SaaS'},
    ],
  },
  {
    title: '地域',
    key: 'address',
    showFilterType: 'filterCheckboxEnum',
    filters: [
      { label: '上海', value: '上海' },
      { label: '苏州', value: '苏州' },
      { label: '广州', value: '广州', disabled: true},
      { label: '亳州', value: '亳州' },
    ],
  },
]

const data = ref([
  {
    name: 'alfred',
    age: 36,
    occupation: 'IaaS',
    address: '上海',
  },
  {
    name: 'lily',
    age: 39,
    occupation: 'IaaS',
    address: '上海',
  },
  {
    name: 'tom',
    age: 27,
    occupation: 'PaaS',
    address: '苏州',
  },
  {
    name: 'jerry',
    age: 28,
    occupation: 'SaaS',
    address: '苏州',
  },
  {
    name: 'dog',
    age: 15,
    occupation: 'IaaS',
    address: '广州',
  },
  {
    name: 'miaomiao',
    age: 18,
    occupation: 'IaaS',
    address: '广州',
  }
])

const onFilterCheckboxEnumChange = (event) => {
  const backFilters = {}
  event.columns.filter(item => item.showFilterType === 'filterCheckboxEnum').forEach((item => {
    backFilters[item.key]=item._filterChecked
  }))
  console.log("777888", backFilters)
  // 发送请求到后端，获取过滤后的数据
}
</script>

<style scoped>
</style>